<template>
  <div class="box">
      <div id="chart" style="height:300px;"></div>
          <card :header="{title:title}">
            <div slot="content" class="card-demo-flex card-demo-content01">
                <div class="vux-1px-r">
                    <span class="number">{{savedMoney}}</span>
                    <br/>
                   <span class="info">已存<strong>{{savedDays}}</strong> 天</span> 
                </div>
                <div class="vux-1px-r">
                    <span class="number">{{savingMoney}}</span>
                    <br/>
                   <span class="info">剩余 <strong>{{savingDays}}</strong> 天</span>    
                </div>
                <div class="vux-1px-r">
                    <span class="number">0</span>
                    <br/>
                    缺失天数
                </div>
      </div>
    </card>
  </div>
</template>
<script>
import { Card } from "vux";
let pieChart = require("echarts");
var option = {
  title: {
    text: "365存钱计划",
    subtext: "",
    x: "center"
  },
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    orient: "vertical",
    left: "left",
    data: ["已存", "未存"]
  },
  series: [
    {
      name: "存钱金额",
      type: "pie",
      radius: "55%",
      center: ["50%", "60%"],
      itemStyle: {
        emphasis: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
};

export default {
  components: {
    Card
  },
  computed: {
    savedDays: function() {
      return this.saved.length;
    },
    savingDays: function() {
      return this.saving.length;
    },
    savedMoney: function() {
      var savedVaule = 0;
      this.saved.map(function(save) {
        savedVaule += Number(save.money);
      });
      return savedVaule;
    },
    savingMoney: function() {
      var savingValue = 0;
      this.saving.map(function(money) {
        savingValue += money;
      });
      return savingValue;
    },
    //详情数据，用于图表的绘制，返回chart的series.data需要的值
    details: function() {
      var data = [];

      data.push({
        value: this.savedMoney,
        name: "已存"
      });
      data.push({
        value: this.savingMoney,
        name: "未存"
      });
      return data;
    }
  },
  data() {
    return {
      title: "存钱详情"
    };
  },
  methods: {
    initChart: function() {
      var chart = pieChart.init(document.getElementById("chart"));
      option.series[0].data = this.details;
      chart.setOption(option);
    }
  },
  mounted() {
    this.initChart();
  },
  props: {
    saving: {
      type: Array,
      required: true
    },
    saved: {
      type: Array,
      required: true
    }
  }
};
</script>
<style scoped lang="less">
@import "~vux/src/styles/1px.less";
.box {
  width: 100%;
  height: 100%;
}
.card-demo-flex {
  display: flex;
}
.card-demo-content01 {
  padding: 10px 0;
}
.card-padding {
  padding: 15px;
}
.card-demo-flex > div {
  flex: 1;
  text-align: center;
  font-size: 12px;
}
.number {
  color: red;
}
.info {
  font-size: 8px;
  & strong {
    color: royalblue;
  }
}
</style>
